<!--
 * @Description: 
 * @Author: rendc
 * @Date: 2025-09-12 17:22:31
 * @LastEditors: rendc
 * @LastEditTime: 2025-09-15 09:27:56
-->
 <!doctype   html>
 <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
        星巴克
    </title>
    </head>
     <style>
    .left {
      float: left;
      width: 400px;
      ;
    }
    .right {
      /* 
        overflow:auto;(隐藏溢出的内容)利⽤BFC
      */
      overflow: auto;
      ;
    }
  </style>
    <body>
        
        <div cellspacing="0"class="left">   
            <div>
                <p style="height: 50px;width: 50px;display: line-block;">
                    <img src="./sucai/logo.svg">
                </p>
                <p style="display: line-block;width: 50px;">
                    门店
                </p>
                <p style="display: line-block;width: 80px;">
                    我的账户
                </p>
                <p style="display: line-block;width: 50px;">
                    菜单
                </p>
                <p style="display: inline-block;width: 100px;">
                    <img src="./sucai/icon-hamburger.svg">
                </p>
            </div>
                </p>
                <div>
                    <div style="font-size: 30px;padding-top: 100px;">
                        登录或创建一个新账户
                        <img src="./sucai/星巴克太阳.png">

                    </div>
                    <div style="padding-top: 30px; ">
                        <img src="./sucai/登录白.svg">
                            <p style="display: inline-block;font-size: 20px;color: #008a62;padding-right: 50px;">登录</p>
                            <p style="display: inline-block;font-size: 20px;color: #008a62;border: 1px solid #008a62;">注册</p>
                    </div> 
                </div>
            </div>
        </div>
        <div class="right"overflow:auto;style="height: auto;width: 1100px;">
            <img src="./sucai/登录大广告.png"style="height: 400px;width: 1100px;">
            <div>
                 <form action="">
                <h2>欢迎注册星巴克会员系统</h2>
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" required><br><br>
                <label for="password">密码:</label>
                <input type="password" id="password" name="password" required><br><br>
                <label for="email">邮箱:</label>
                <input type="email" id="email" name="email" required><br><br>
                <button type="submit">注册</button>
                <button type="reset">重置</button>
                <p><a href="#">已有账号?去登录</a></p>     
            </form>
            </div>
        </div>
    </body>
</html>